<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8" />
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      @keyframes ColorChange {
        0% {
          outline: 1px solid lightgreen;
        }

        50% {
          outline: 1px solid green;
        }

        1000% {
          outline: 1px solid lightgreen;
        }
      }

      svg {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate3d(-50%, -50%, 0);
        outline: 1px solid red;
        animation: ColorChange 500ms ease infinite;
      }

      line,
      polyline,
      rect {
        stroke-linecap: round;
        stroke-linejoin: round;
      }
    </style>
  </head>

  <body>
    <svg width="600"
         height="600"
         xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink"
         preserveAspectRatio="xMinYMin meet"
         stroke-linecap="round"
         stroke-linejoin="round"
         viewBox="0 0 600 600">

      <!-- 第十一章 滤镜、投影 -->
      <defs>
        <filter id="drop-shadow"
                x="-100"
                y="-100"
                width="200"
                height="200">
          <!--
            result="blur"
              属性指定当前基元的结果稍后可以通过 blur 名引用。这不同于 XML id；
              给定的名称是一个局部名称，它只在包含该基元的 <filter> 中有效。
            -->
          <feGaussianBlur in="SourceAlpha"
                          stdDeviation="1"
                          result="blur" />
          <!--
            feOffset接收result="blur"的输出，
            把阴影便宜四个像素，然后输出名字为offsetBlur的结果位图
            -->
          <feOffset in="blur"
                    dx="4"
                    dy="4"
                    result="offsetBlur" />
          <!--
            feMerge包裹feMergeNode元素，每个feMergeNode元素都接收一个输入，
            这些输入按照顺序一个一个堆叠再上面，这里我们希望offsetBlur在原始SourceGraphic下面
           -->
          <feMerge>
            <feMergeNode in="offsetBlur" />
            <feMergeNode in="SourceGraphic" />
          </feMerge>
        </filter>
      </defs>
      <!-- 展示原始图像 -->
      <image xlink:href="/source/flower.svg"
             x="170"
             y="10"
             width="122"
             height="104"
             filter="url(#drop-shadow)" />



      <!-- 创建发光是投影 -->
      <defs>
        <filter id="glow">
          <!--
            type取值：
              hueRotate，色相
              saturate，饱和度
              luminanceToAlpha，用亮度决定阿尔法值
           -->
          <feColorMatrix type="matrix"
                         values="
                          0 0 0 0.2 0
                          0 0 0 0.3 0
                          0 0 0 0.9 0
                          0 0 0 1   0
                         " />
          <feGaussianBlur stdDeviation="2.5"
                          result="coloredBlur" />
          <feMerge>
            <feMergeNode in="coloredBlur" />
            <feMergeNode in="SourceGraphic" />
          </feMerge>
        </filter>
      </defs>

      <text x="80"
            y="50"
            style="filter: url(#glow);fill: #003333;font-size: 18px;">
        Spring
        <tspan x="80"
               y="70">Flower</tspan>
      </text>

      <defs>
        <filter id="sky-shadow"
                filterUnits="objectBoundingBox">
          <feImage xlink:href="/source/sky.jpg"
                   result="sky"
                   preserveAspectRatio="none" />
          <feGaussianBlur in="SourceAlpha"
                          stdDeviation="2"
                          result="blur" />
          <feOffset in="blur"
                    dx="4"
                    dy="4"
                    result="offsetBlur" />
          <feMerge>
            <feMergeNode in="sky" />
            <feMergeNode in="offsetBlur" />
            <feMergeNode in="SourceGraphic" />
          </feMerge>
        </filter>
      </defs>
      <g id="flower"
         style="filter: url(#sky-shadow)">
        <!-- 这里绘制花朵图形 -->
        <image xlink:href="/source/flower.svg"
               x="330"
               y="10"
               width="122"
               height="104" />
      </g>

      <!--
        feComponentTransfer滤镜
       -->
      <defs>
        <filter id="brightness-shadow"
                filterUnits="objectBoundingBox">
          <feImage xlink:href="/source/sky.jpg"
                   result="sky" />
          <!--
            feFuncB、feFuncR、feFuncG，分别控制对应的通道
            type属性，指定如何调整通道
            其他属性，作为具体调整
            -->
          <feComponentTransfer in="sky"
                               result="sky">
            <feFuncB type="linear"
                     slope="3"
                     intercept="0" />
            <feFuncR type="linear"
                     slope="9.5"
                     intercept="0.2" />
            <feFuncG type="linear"
                     slope="1.5"
                     intercept="0.2" />
          </feComponentTransfer>
          <feGaussianBlur in="SourceAlpha"
                          stdDeviation="2"
                          result="blur" />
          <feOffset in="blur"
                    dx="4"
                    dy="4"
                    result="offsetBlur" />
          <feMerge>
            <feMergeNode in="sky" />
            <feMergeNode in="offsetBlur" />
            <feMergeNode in="SourceGraphic" />
          </feMerge>
        </filter>

      </defs>
      <g id="flower"
         style="filter: url(#brightness-shadow)">
        <!-- 这里绘制花朵图形 -->
        <image xlink:href="/source/flower.svg"
               x="30"
               y="150"
               width="122"
               height="104" />
      </g>
    </svg>


    <script>
      const ele = document.querySelector("#xxx");
      let n = 0;
      function Renderer() {
        n++;
        if (n >= 360) n = 0;
        window.requestAnimationFrame(Renderer);
      }
      // Renderer();
    </script>
  </body>

</html>
